<template>
  <div id="profile">
    <Breadcrumb :separator="'- '+name+' -'" v-if="isShow">
      <BreadcrumbItem :to="publish" :class="this.$route.path == publish ? 'active' : ''">
        <Icon type="md-create" />Publish
      </BreadcrumbItem>
      <BreadcrumbItem :to="manage" :class="this.$route.path == manage ? 'active' : ''">
        <Icon type="ios-settings" />Manage
      </BreadcrumbItem>
    </Breadcrumb>
    <keep-alive :exclude="/.*Publish/" :max="5">
      <router-view :key="$router.fullPath"></router-view>
    </keep-alive>
  </div>
</template>

<script>
export default {
  name: 'Profile',
  data() {
    return {
      isShow: true,
      name: 'blog',
      publish: '/profile/blog/publish',
      manage: '/profile/blog/manage'
    }
  },
  watch: {
    $route() {
      switch(this.$route.name) {
        case 'profile':
        case 'profileBlog': {
          this.isShow = true
          this.name = 'blog'
          this.publish = '/profile/blog/publish'
          this.manage = '/profile/blog/manage'
          break
        }
        case 'profileType': {
          this.isShow = true
          this.name = 'type'
          this.publish = '/profile/type/publish'
          this.manage = '/profile/type/manage'
          break
        }
        case 'profileTag': {
          this.isShow = true
          this.name = 'tag'
          this.publish = '/profile/tag/publish'
          this.manage = '/profile/tag/manage'
          break
        }
        case 'profileCarousel': 
        case 'profileLink': {
          this.isShow = false
          break
        }
      }
    }
  },
}
</script>

<style lang="scss" scoped>
#profile {
  .ivu-breadcrumb {
    position: absolute;
    top: -30px;
    right: 1.2rem;
    font-size: 1rem;
    &>span:last-child {
      font-weight: 500;
    }
  }
  main {
    margin-top: 100px;
  }
}
</style>
<style lang="scss">
.ivu-breadcrumb {
  span.active a {
    color: #28cfcf;
  }
  a:hover {
    color: #28cfcf;
  }
} 
</style>